import React from 'react';

import View from 'lib/View.jsx';
import ItemSelect from 'lib/components/ItemSelect.jsx';
import Card from 'lib/components/card.jsx';
import TopBar from 'lib/components/TopbarWidget.jsx';
import dispatcher from 'lib/dispatcher'

import Layout from '../common/layout.jsx';

import MainScope from './MainScope.es6';

export default class MainView extends View {
  constructor(props, context) {
    super(props, context);
  }

  onSortChange(key){
    dispatcher.dispatch({
      $type:'change_sort',
      key:key
    })
  }

  render() {
    return (
      <Layout title="Ajax" subtitle="监控 Ajax 请求性能状况">
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-1-3">
            <div className="box">
              <Card>
                <ItemSelect options={this.state.sortOptions} onChange={this.onSortChange} />
                <TopBar store={this.state.topbar} />
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-2-3">
            { React.cloneElement(this.props.children, { routeParams: this.props.params, key: this.getHandlerKey() }) }
          </div>
        </div>
      </Layout>
    );
  }
}

MainView.defaultProps = {
  Scope: MainScope
}
